<template>
  <div class="main">
    <!-- 登入 -->
      <div class="form-container sign-in-container">
        <el-form
          class="form"
          :model="loginForm"
          onsubmit="return false;"
          ref="loginFormRef"
        >
          <h2 class="container-title">{{ title }}</h2>

          <el-form-item class="form-item" prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              placeholder="昵称"
            />
          </el-form-item>
          <el-form-item class="form-item" prop="passwoed">
            <el-input
              v-model="loginForm.password"
              type="password"
              name="password"
              placeholder="密码"
            />
          </el-form-item>
          <button class="signUp theme-button" type="button" @click="login()">
            登录
          </button>
        </el-form>
      </div>
  </div>
</template>

<script>
import { getMenu } from "@/api/data";
export default {
  name: "login",
  data() {
    return {
      title: "",
      loginForm: {
        username: "admin",
        password: "admin",
      }
    };
  },
  mounted() {
    this.title = process.env.VUE_APP_TITLE;
  },
  methods: {
    login() {
      getMenu(this.loginForm).then(({ data: res }) => {
        console.log(res, "res");
        if (res.code === 20000) {
          this.$store.commit("clearMenu");
          this.$store.commit("setMenu", res.data.menu);
          this.$store.commit("setToken", res.data.token);
          this.$store.commit("addMenu", this.$router);
          console.log("username" + this.loginForm.username);
          this.$store.commit("setUserName", this.loginForm.username);
          if (this.loginForm.username === "admin") {
            this.$store.commit("setAuthority", 1);
          }
          this.$router.push({ name: "home" });
        } else {
          this.$message.warning(res.data.message);
        }
      });
      // const token = Mock.Random.guid()
      // this.$store.commit('setToken', token)
      // this.$router.push({ name: 'home' })
    },
    forfet() {},
  },
};
</script>
<style lang="less" scoped>
  .main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #212fb1;
  }
</style>
